<!DOCTYPE html>
<html>
<head>
    <title>监测报警</title>
    <link rel="stylesheet" href="__STATIC__/js/element-plus-214/element_plus.css">
    <script src="__STATIC__/js/element-plus-214/vue@next.js"></script>
    <script src="__STATIC__/js/element-plus-214/element_plus.js"></script>
    <script src="__STATIC__/js/element-plus-214/zh-cn.js"></script>
    <script type="text/javascript" src="__STATIC__/js/js/jquery-3.3.1.min.js"></script>
    <style>
        [v-cloak] {
            display: none !important;
        }
        .el-cascader-panel{
            height: 300px !important;
        }
    </style>
</head>
<body>
<!-- layui-tab开始 -->
<div class="layui-tab" id="app" v-cloak>
    <!-- 表格内容开始 -->
    <div class="layui-card" style="margin-top:20px">
        <el-descriptions class="margin-top" :column="2" border>
            <el-descriptions-item>
                <template #label>报警时间</template>
                {{ detail.monitor_time }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>监测设备</template>
                {{ detail.monitor_device }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>报警等级</template>
                {{ detail.alarm_level }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>报警地点</template>
                {{ detail.alarm_address }}
            </el-descriptions-item>
            <el-descriptions-item :span="4">
                <template #label>报警原因</template>
                {{ detail.reason }}
            </el-descriptions-item>
            <el-descriptions-item :span="4">
                <template #label>监控视频</template>
                <el-link type="primary" @click="viewData">查看</el-link>
            </el-descriptions-item>
            <el-descriptions-item >
                <template #label>周边分布</template>
                <el-select v-model="periphery_form.distance" placeholder="请选择" @change="getTeamList">
                    <el-option label="1km" value="1000"></el-option>
                    <el-option label="2km" value="2000"></el-option>
                    <el-option label="3km" value="3000"></el-option>
                    <el-option label="4km" value="4000"></el-option>
                    <el-option label="5km" value="5000"></el-option>
                    <el-option label="6km" value="6000"></el-option>
                </el-select>
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane :label="type_item.label" :name="type_item.name" v-for="type_item in periphery_type_list">
                        <el-table :data="team_list" border style="width: 100%">
                            <el-table-column label="" width="55">
                                <template #default="scope">
                                    <el-radio v-model="form.team_id" :label="scope.row.id"></el-radio>
                                </template>
                            </el-table-column>
                            <el-table-column prop="name" label="队伍名称"> </el-table-column>
                            <el-table-column prop="type" label="队伍类型"> </el-table-column>
                            <el-table-column prop="distance" label="距离/m"> </el-table-column>
                            <el-table-column prop="phone" label="联系方式"> </el-table-column>
                        </el-table>
                    </el-tab-pane>
                </el-tabs>
            </el-descriptions-item>
        </el-descriptions>
        <div style="margin-top: 30px;text-align: center;">
            <el-button type="success" @click="makeSure">火情确认</el-button>
            <el-button type="warning" @click="misstate">误报确认</el-button>
        </div>
    </div>


    <el-dialog title="火情确认" v-model="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="火情等级" :label-width="formLabelWidth">
                <el-select v-model="form.alarm_level" placeholder="请选择火情等级">
                    <el-option label="一级报警" value="一级报警"></el-option>
                    <el-option label="二级报警" value="二级报警"></el-option>
                    <el-option label="三级报警" value="三级报警"></el-option>
                    <el-option label="四级报警" value="四级报警"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="致灾因子" :label-width="formLabelWidth">
                <el-radio-group v-model="form.disaster_cause">
                    <el-radio label="祭祀用火">祭祀用火</el-radio>
                    <el-radio label="农事用火">农事用火</el-radio>
                    <el-radio label="野外吸烟">野外吸烟</el-radio>
                    <el-radio label="野外玩火">野外玩火</el-radio>
                    <el-radio label="人力纵火">人力纵火</el-radio>
                    <el-radio label="佛事用火">佛事用火</el-radio>
                    <el-radio label="未知">未知</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="应急预案" :label-width="formLabelWidth">
                <el-radio-group v-model="form.plan">
                    <el-radio label="一级预案">一级预案</el-radio>
                    <el-radio label="二级预案">二级预案</el-radio>
                    <el-radio label="三级预案">三级预案</el-radio>
                    <el-radio label="四级预案">四级预案</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="处理报告" :label-width="formLabelWidth">
                <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="form.deal_report"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
              <el-button @click="cancelDialog">取 消</el-button>
              <el-button type="primary" @click="makeSurePost">确 定</el-button>
            </span>
        </template>
    </el-dialog>
</div>
<script type="text/javascript">
    let id = '{$id}'
    const App = {
        data() {
            return {
                formLabelWidth:'100px',
                dialogFormVisible:false,
                activeName: '',
                team_list:[],
                detail:{
                    monitor_time:'',
                    monitor_device:'',
                    alarm_level:'',
                    alarm_address:'',
                    reason:'',
                },
                periphery_form:{
                    distance:'',
                    type:''
                },
                form:{
                    team_id:'',
                    alarm_level:'',
                    disaster_cause:'',
                    plan:'',
                    deal_report:''
                },
                periphery_type_list:[
                    {
                        'label':'全部',
                        'name':'',
                    },
                    {
                        'label':'涉灾政府部门',
                        'name':'涉灾政府部门',
                    },
                    {
                        'label':'矿山专业救援队伍',
                        'name':'矿山专业救援队伍',
                    },
                    {
                        'label':'应部门',
                        'name':'应部门',
                    },
                    {
                        'label':'巡检部门',
                        'name':'巡检部门'
                    },
                ]
            };
        },
        created: function () {
            this.getDetail()
            this.getTeamList()
        },
        methods: {
            //tabs选择
            handleClick(tab, event) {
                this.periphery_form.type = tab.props.name
                this.getTeamList()
            },
            //救援队列表
            getTeamList() {
                let that = this;
                $.ajax({
                    url: "{:cmf_plugin_url('Alarm://admin_index/getTeamList')}",
                    data: {
                        ...that.periphery_form
                    },
                    dataType: "json",
                    type: "post",
                    success: function (res) {
                        if (res.code === 200) {
                            that.team_list = res.data
                        }
                    }
                });
            },
            //查看监控
            viewData(){
                this.$message({
                    type: 'warning',
                    message: '暂无监控视频',
                })
            },
            //详情
            getDetail() {
                let that = this;
                $.ajax({
                    url: "{:cmf_plugin_url('Alarm://admin_index/getDetail')}",
                    data: {
                        'id':id
                    },
                    dataType: "json",
                    type: "post",
                    success: function (res) {
                        if (res.code === 200) {
                            that.detail = res.data
                        }else{
                            that.$message({
                                type: 'error',
                                message: res.message,
                            })
                        }
                    }
                });
            },
            //误报确认
            misstate(){
                this.$confirm('确认本次火情是否系统误报, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(() => {
                    this.misstatePost()
                }).catch(() => {

                })
            },
            misstatePost(){
                let that = this;
                $.ajax({
                    url: "{:cmf_plugin_url('Alarm://admin_index/misstatePost')}",
                    data: {
                        id:id,
                    },
                    dataType: "json",
                    type: "post",
                    success: function (res) {
                        if(res.code === 200){
                            that.$message({
                                type: 'success',
                                message: res.message,
                            })
                            setTimeout(function (){
                                that.cancelSub()
                            },600)
                        }else{
                            that.$message({
                                type: 'error',
                                message: res.message,
                            })
                        }
                    }
                });
            },
            //确认火情
            makeSure(){
                if(this.form.team_id == ''){
                    this.$message({
                        type: 'warning',
                        message: '请先选择应急部门',
                    })
                    return false;
                }
                this.dialogFormVisible = true
            },
            //提交确认火情
            makeSurePost(){
                let that = this;
                $.ajax({
                    url: "{:cmf_plugin_url('Alarm://admin_index/makeSurePost')}",
                    data: {
                        id:id,
                        ...that.form
                    },
                    dataType: "json",
                    type: "post",
                    success: function (res) {
                        if(res.code === 200){
                            that.$message({
                                type: 'success',
                                message: res.message,
                            })
                            that.cancelDialog()
                            setTimeout(function (){
                                that.cancelSub()
                            },600)
                        }else{
                            that.$message({
                                type: 'error',
                                message: res.message,
                            })
                        }
                    }
                });
            },
            cancelDialog(){
                this.dialogFormVisible = false
            },
            cancelSub(){
                const index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                parent.layer.close(index); //再执行关闭
            }

        }
    };
    const app = Vue.createApp(App);
    app.use(ElementPlus, {
        locale: ElementPlusLocaleZhCn,
    });
    app.mount("#app");
</script>
</body>
</html>